import { TextFieldEntry, isTextFieldEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel'
import { useService } from 'bpmn-js-properties-panel'

export default function (element) {
  return [
    {
      id: 'spell',
      element,
      component: Spell,
      isEdited: isTextFieldEntryEdited
    },
    {
      id: 'spellSelect',
      element,
      component: SpellSelect,
      isEdited: isSelectEntryEdited
    }
  ]
}

function Spell (props) {
  const { element, id } = props

  const modeling = useService('modeling')
  const translate = useService('translate')
  const debounce = useService('debounceInput')

  const getValue = () => {
    return element.businessObject.spell || ''
  }

  const setValue = value => {
    return modeling.updateProperties(element, {
      spell: value
    })
  }

  return TextFieldEntry({
    element: element,
    id: id,
    description: translate('请输入名称'),
    label: translate('名称:'),
    getValue,
    setValue,
    debounce
  })
}

function SpellSelect (props) {
  const { element, id } = props

  const modeling = useService('modeling')
  const translate = useService('translate')

  const getValue = () => {
    return element.businessObject.spellSelect || ''
  }

  const setValue = value => {
    return modeling.updateProperties(element, {
      spellSelect: value
    })
  }

  return SelectEntry({
    element: element,
    id: id,
    description: translate('请选择类型'),
    label: translate('类型:'),
    getValue: getValue,
    setValue: setValue,
    getOptions: function () {
      return [
        {
          label: 'option A',
          value: 'A'
        },
        {
          label: 'option B',
          value: 'B',
          disabled: false
        },
        {
          label: 'option C',
          value: 'C',
          disabled: true
        }
      ]
    }
  })
}
